﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Default</title>
    <link href="../extjs/resources/css/ext-all-gray.css" rel="stylesheet" />
    <script src="../Scripts/ext-all.js"></script>
    <script src="../extjs/ux/IFrame.js"></script>
</head>
<body>
    <script type="text/javascript">

        Ext.onReady(function () {

            var topPanel = Ext.create('Ext.panel.Panel', {
                region: 'north',
                height: 40,
                margins: 5,
                html: 'Top panel'
            });

            Ext.define('treeModel', {
                extend: 'Ext.data.Model',
                fields: ['text', 'link']
            });

            var treeStore = Ext.create('Ext.data.TreeStore', {
                model: 'treeModel',
                root: {
                    expanded: true,
                    children: [{
                        text: 'Quản lý công việc',
                        leaf: false,
                        children: [{
                            text: 'Danh sách công việc',
                            link: 'TaskList.html',
                            leaf: true
                        }, {
                            text: 'Báo cáo công việc',
                            link: 'abc',
                            leaf: true
                        }]
                    }, {
                        text: 'Quản lý thiết bị',
                        leaf: false,
                        children: [{
                            text: 'Danh sách thiết bị',
                            link: 'abc',
                            leaf: true
                        }, {
                            text: 'Danh mục thiết bị',
                            link: 'abc',
                            leaf: true
                        }, {
                            text: 'Lịch sử sử dụng',
                            link: 'abc',
                            leaf: true
                        }, {
                            text: 'Lịch sử bảo trì',
                            link: 'abc',
                            leaf: true
                        }]
                    }, {
                        text: 'Khác',
                        leaf: false,
                        children: [{
                            text: 'Danh sách phòng ban',
                            link: 'abc',
                            leaf: true
                        }, {
                            text: 'Danh sách nhân sự',
                            link: 'abc',
                            leaf: true
                        }, {
                            text: 'Tool - Upload file',
                            link: 'abc',
                            leaf: true
                        }]
                    }, {
                        text: 'Quản trị',
                        leaf: false,
                        children: {
                            text: 'Quản lý tài khoản',
                            link: 'abc',
                            leaf: true
                        }
                    }]
                }
            });

            var westPanel = Ext.create('Ext.tree.Panel', {
                title: 'Application Menu',
                region: 'west',
                collapsible: true,
                width: 200,
                maxWidth: 250,
                minWidth: 150,
                split: true,
                margins: '0 5 0 0',
                store: treeStore,
                rootVisible: false,
                listeners: {
                    itemclick: function (tree, record, item, index, e, option) {

                        if (!record.data.leaf) {
                            return;
                        }

                        var nodeText = record.data.text;
                        var tabBar = tabPanel.getTabBar();
                        var tabIndex;
                        for (var i = 0; i < tabBar.items.length; i++) {
                            if (tabBar.items.get(i).getText() === nodeText) {
                                tabIndex = i;
                            }
                        }

                        if (Ext.isEmpty(tabIndex)) {
                            tabPanel.add({
                                xtype: 'uxiframe',
                                src: record.data.link,
                                title: record.data.text
                            });

                            tabIndex = tabPanel.items.length - 1;
                        }
                        tabPanel.setActiveTab(tabIndex);
                    }
                }
            });

            var tabPanel = Ext.create('Ext.tab.Panel', {
                region: 'center',
                margins: '0 5 0 0',
                defaults: {
                    bodyPadding: 10,
                    closable: true
                },
                items: {
                    title: 'Trang chủ',
                    closable: false
                }
            });

            var viewport = Ext.create('Ext.container.Viewport', {
                layout: 'border',
                items: [{
                    region: 'north',
                    margins: 5,
                    height: 40,
                    xtype: 'container',
                    html: 'Top panel'
                }, {
                    region: 'south',
                    margins: '5 5 0 5',
                    height: 35,
                    xtype: 'container',
                    html: 'footer'
                }, westPanel, tabPanel]
            });

        });
    </script>
</body>
</html>
